 <template>
<div class="adoptDetails step">
  <div class="step-header">
    <el-steps :active="active" align-center finish-status="success">
      <el-step title="物品信息"></el-step>
      <el-step title="物品图片"></el-step>
      <el-step title="物品规格"></el-step>
      <el-step title="物品库存"></el-step>
      <el-step title="物品详情"></el-step>
    </el-steps>
  </div>
  <div class="step-content">
    <keep-alive>
      <adopt-info
        ref="adopt0"
        v-if="active === 0"
        :adopt-id="adoptId"
        :is-view="isView"></adopt-info>
      <adopt-album
        ref="adopt1"
        v-if="active === 1"
        :adopt-id="adoptId"
        :is-view="isView"></adopt-album>
      <adopt-spec
        ref="adopt2"
        v-if="active === 2"
        @reset-sku="refreshSku = true"
        :adopt-id="adoptId"
        :lock-status="lockStatus"
        :is-view="isView"></adopt-spec>
      <adopt-s-k-u
        ref="adopt3"
        v-if="active === 3"
        @has-reset-sku="refreshSku = false"
        :adopt-id="adoptId"
        :is-view="isView"></adopt-s-k-u>
      <adopt-image-text
        ref="adopt4"
        v-if="active === 4"
        :adopt-id="adoptId"
        :is-view="isView"></adopt-image-text>
    </keep-alive>
  </div>
  <div class="step-buttons">
    <template v-if="isEdit">
      <el-button size="mini" v-if="active !== 0" @click="prev">上一步</el-button>
      <template v-if="active !== max">
        <el-button size="mini" type="primary" v-if="active === 0 && !isView" @click="save">保存当前步骤</el-button>
        <el-button size="mini" @click="next(active === 1 || active === 3)">下一步</el-button>
      </template>
      <template v-else>
        <el-button size="mini" type="primary" v-if="!isView" @click="save">保存当前步骤</el-button>
        <el-button size="mini" @click="close">关闭</el-button>
      </template>
    </template>
    <template v-else>
      <el-button size="mini" v-if="active !== 0" @click="prev">上一步</el-button>
      <el-button size="mini" type="primary" v-if="active !== max" @click="saveAndNext">下一步</el-button>
      <el-button size="mini" type="primary" v-else @click="saveAndClose">完成</el-button>
    </template>
  </div>
</div>
</template>

<script>
import adoptInfo from "./adoptInfo";
import adoptAlbum from "./adoptAlbum";
import adoptImageText from "./adoptImageText";
import adoptSpec from "./adoptAttrs";
import adoptSKU from "./adoptSKU";
import adoptHarvest from "./adoptHarvest";
export default {
  name: "adoptDetails",
  components: { adoptInfo, adoptAlbum, adoptImageText, adoptSpec, adoptSKU, adoptHarvest },
  props:{
    adoptId: String,
    lockStatus: String,
    isView:{
      type: Boolean,
      default: false
    }
  },
  provide(){
    return{
      refreshSku: () => this.refreshSku
    }
  },
  data(){
    return{
      isEdit: false,
      refreshSku: true,
      active: 0,
      max: 4
    }
  },
  created(){
    this.isEdit = !!this.adoptId;
  },
  methods:{
    prev(){this.active --},
    async saveAndNext(){
      let info = await this.save();
      if(info === false) return;
      if(this.active === 0){
        this.$emit('update:adoptId', info.id);
      }
      await this.next();
    },
    async next(forceValid){
      if(forceValid){
        if(await this.save()){
          this.active ++
        }
      }else{
        this.active ++
      }
    },
    async saveAndClose(){
      let info = await this.save();
      if(info === false) return;
      this.close();
      this.$emit('success');
    },
    save(){
      return this.$refs['adopt' + this.active].save();
    },
    close(){
      this.$emit('close');
    }
  }
}
</script>

<style scoped>

</style>